<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4326 - OL4加载天地图xyz服务展示地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <!--    <script src='../lib/ol6.4.3/ol.js'></script>-->
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .btn {
            position: absolute;
            top: 10px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<div>
    <button class='btn' onclick='refreshClick()'>refresh</button>
</div>
<script>

    function createMap() {
        const elementDom = document.getElementById('map');
        console.log(elementDom.childNodes);
        for (let i = elementDom.childNodes.length - 1; i >= 0; i--) {
            elementDom.removeChild(elementDom.childNodes[i]);
        }
        const projection = ol.proj.get('EPSG:4326');

        const size = ol.extent.getWidth(projection.getExtent()) / 256;

        const resolutions = [];
        // const matrixIds = new Array(18);
        for (let z = 1; z <= 20; z++) {
            resolutions[z] = size / Math.pow(2, z);
            // matrixIds[z] = z;
        }
        console.log(resolutions);


        // http://112.132.1.107:7777/gisserver/tmsserver/china_tms/5/24/19.png
        const url = `http://t{0-6}.tianditu.com/DataServer?T=vec_c&tk=a6bf5a2496115f58481b947040c83ae3&x={x}&y={y}&l={z}`;
        // const url = `http://t{0-6}.tianditu.com/DataServer?T=img_c&tk=a6bf5a2496115f58481b947040c83ae3&x={x}&y={y}&l={z}`;
        // const url = `http://112.132.1.107:7777/gisserver/tmsserver/china_tms/{x}/{y}/{z}.png`
        // const url = `http://183.223.218.156:9070/qingdaoTile/{z}/{x}/{y}.png`
        // const url = `http://192.168.130.204:9998/roadmap/{z}/{x}/{y}.png`
        const xyzSource = new ol.source.XYZ({
            url,
            projection,
            wrapX: false
        });
        // 图层
        const baseLayer = new ol.layer.Tile({
            source: xyzSource
        });

        // const url1 = `http://t{0-6}.tianditu.com/DataServer?T=cva_w&tk=a6bf5a2496115f58481b947040c83ae3&x={x}&y={y}&l={z}`;
        const url1 = `http://t{0-6}.tianditu.com/DataServer?T=cia_c&tk=a6bf5a2496115f58481b947040c83ae3&x={x}&y={y}&l={z}`;
        const xyzSource1 = new ol.source.XYZ({
            url: url1,
            projection,
            wrapX: false
        });
        // 图层
        const baseLayer1 = new ol.layer.Tile({
            source: xyzSource1
        });

        // const circlePoint = ol.proj.transform([116.384722, 39.889916], 'EPSG:4326', 'EPSG:3857');
        // console.log(circlePoint);
        const points = [
            [0, 0],
            [116.384722, 39.889916],
            [120.01146197319031, 30.28254210948944],
            [120.01245975494385, 30.285433530807495],
            [104.53296050793459, 28.692687422124603]
        ];
        // const centerPoint = proj4('EPSG:4326', 'EPSG:3857', points[3]);
        const centerPoint = points[4];

        const iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(centerPoint)
        });

        const iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [10, 26],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                src: '../image/position_orange.png'
            })
        });

        iconFeature.setStyle(iconStyle);

        const vectorSource = new ol.source.Vector({
            features: [iconFeature],
            wrapX: false
        });

        const iconLayer = new ol.layer.Vector({
            source: vectorSource
        });

        const map = new ol.Map({
            layers: [
                baseLayer,
                baseLayer1,
                // iconLayer
            ],
            target: 'map',
            view: new ol.View({
                center: centerPoint,
                projection,
                zoom: 1,
                maxZoom: 25,
                minZoom: 1,
                resolutions
            })
        });


        console.log(map.getView());

        const clickHandler = evt => {
            console.log(evt);
        };

        map.on('click', clickHandler.bind(this));

        map.addEventListener('moveend', () => {
            console.log('moveend', map.getView().getZoom());
        });

        setTimeout(() => {
            map.un('click', clickHandler);
        }, 5000);

    }

    function refreshClick() {
        createMap();
    }

    createMap();


</script>
</body>
</html>